<template>
	<slot></slot>
	<u-popup :show="showBaseInfoPopup" :round="10" @open="onOpen" @close="onClose">
		<view style="">
			<view style="background-color: white;box-shadow: 0px 2px 16px 0px #66666644;border:solid 1px #eeeeee;border-radius: 10px;">
				<!-- 卡片头 -->
				<view style="border-bottom:solid 1px #eeeeee;padding:10px 10px;color: #7b7b7b;font-size: 14px;">来至企业微信</view>
				<!-- 卡片体 -->
				<view style="padding: 10px;">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<u-avatar :src="absUrl(userStore.baseInfo.head_icon_url)" size="50"></u-avatar>
						<view style="margin:0 10px;">
							<view style="padding: 5px 0;font-size: 16px;">
								 <span>{{userStore.baseInfo.nickname}}</span><span>&nbsp;</span><span style="color: limegreen">@麦微</span>
							</view>
							<view style="color: #7d7d7d;font-size: 13px;">
								{{userStore.baseInfo.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 卡片脚 -->
				<view style="border-top:solid 1px #eeeeee;padding: 8px 15px;color: #7b7b7b;font-size: 13px;">电话:{{userStore.baseInfo.phone_number}}</view>
			</view>
			
			<view style="padding: 20px;">
				<view>获取你的头像、昵称</view>
			</view>
			<u-line></u-line>
			<!-- 用户信息表单 -->
			<view style="margin-bottom: 10px;">
				<!-- 头像字段 -->
				<view style="padding: 0px;"> 
					<view style="padding: 10px;display: flex;justify-content: space-between;align-items: center;">
						<!-- 左排 -->
						<view style="display: flex;align-items:center;">
							<view style="font-size: 15px;">头像</view>
							<view style="margin-left: 10px;"><u-avatar :src="absUrl(userStore.baseInfo.head_icon_url)" size="70"></u-avatar></view>
						</view>
						  
						<!-- 右排 -->
						<view style="display: flex;flex: 1 0 0;">
							<view style="flex: 1 0 0;"> 
								<!-- #ifdef MP-WEIXIN -->
								<button plain="true" :style="{backgroundColor:'transparent',border:'none'}" open-type="chooseAvatar" @chooseavatar="(e)=> userStore.baseInfo.head_icon_url = e.detail.avatarUrl"><text style="font-size: 13px;color:#777">点击获取微信头像</text></button>
								<!--#endif-->
								 
								<!-- #ifndef MP -->
								<button @click="onChooseAvatar" plain="true" :style="{backgroundColor:'transparent',border:'none'}"><text style="font-size: 13px;color:#777">点击设置头像</text></button>
								<!--#endif-->
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<u-line></u-line>
				</view>
				
				<!-- 昵称字段 -->
				<view style="padding: 0px;">
					<view style="padding: 10px 10px;display: flex;justify-content: space-between;">
						<!-- 左排 -->
						<view style="flex:1 0 0;display: flex;align-items: center;justify-content: center;">
							<view style="font-size: 15px;">昵称</view>
							<view style="flex:1 0 0;margin-left: 10px;margin-top: 5px;">
								<input type="nickname" :value="userStore.baseInfo.nickname" @blur="(event)=>{userStore.baseInfo.nickname = event.detail.value}" placeholder="请输入昵称" />
							</view>
						</view>
						
						<!-- 右排 -->
						<view style="display: flex;">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<u-line></u-line>
				</view>
				
				<!-- 姓名字段 -->
				<view style="padding: 0px;">
					<view style="padding: 10px 10px;display: flex;justify-content: space-between;">
						<!-- 左排 -->
						<view style="flex:1 0 0;display: flex;align-items: center;justify-content: center;">
							<view style="font-size: 15px;">姓名</view>
							<view style="flex:1 0 0;margin-left: 10px;margin-top: 5px;">
								<input :value="userStore.baseInfo.name" @blur="(event)=>{userStore.baseInfo.name = event.detail.value}" placeholder="请输入真实姓名" />
							</view>
						</view>
						
						<!-- 右排 -->
						<view style="display: flex;">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<u-line></u-line>
				</view>
				
				<!-- 手机号码字段 -->
				<view style="padding: 0px;">
					<view style="padding: 10px 10px;display: flex;justify-content: space-between;">
						<!-- 左排 -->
						<view style="display: flex;align-items: center;">
							<view style="font-size: 15px;">手机号</view>
							<view style="flex:1 0 0;margin-left: 10px;margin-top: 5px;">
								<input type="number" :value="userStore.baseInfo.phone_number" @blur="(event)=>{userStore.baseInfo.phone_number = event.detail.value}" placeholder="请输入手机号码"/>
							</view>
						</view> 
						
						<!-- 右排 -->
						<view style="display: flex;">
							<!-- #ifdef MP-WEIXIN -->
							<button size="mini" open-type="getPhoneNumber" @getphonenumber="onPhoneNumber">微信获取</button>
							<!-- #endif -->
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					
					<u-line></u-line>
				</view>
			</view>
			
			<view style="display: flex;justify-content:center;margin-bottom: 30px;">
				<!-- <view style="flex: 0 0 40%;"><u-button :customStyle="{width:'100px'}" >取消</u-button></view> -->
				<view style="width: 100%;margin:20px 10px"><u-button @click="onComfirmBaseInfo" type="primary" :disabled="false">登录</u-button></view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	
	export default {
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			show(val){
				this.showBaseInfoPopup = val
			}
		},
		data() {
			return {
				showBaseInfoPopup:false,
				comfirmCallback:null
			}
		},
		methods:{
			async require(){ 
				let loginResult = await this.requireLogin()
				console.log(loginResult)
				
				if(!loginResult)  return
				 
				await this.requireBaseInfo();
			},
			async requireBaseInfo()
			{
				console.log(this.userStore)
				
				if(!!!this.userStore.baseInfo.nickname ||
					!!!this.userStore.baseInfo.head_icon_url ||
					!!!this.userStore.baseInfo.name 
				){
					this.showBaseInfoPopup = true
					
					await new Promise((resolve,reject)=>{
						this.comfirmCallback = ()=>{
							resolve(true);
						}
					})
				}
			},
			async requireLogin(){
				console.log('WW')
				if(this.userStore.isLogin)
				{
					return true 
				}
				
				// 获取令牌不成功,1.用户未注册 2.账号密码错误
				
				let result = false
				try{
					//#ifdef MP-WEIXIN
						//微信登录不可能不成功,自动登录,自动注册.
						result = await this.userStore.wxlogin();
					//#endif
					
					console.log('WW')
					//#ifdef !MP
						let that = this
						uni.navigateTo({
							url:'/pages/account/id_login/id_login'
						})
						
						result = await new Promise((resolve,reject)=>{
							uni.$once('onIdLogin',(result)=>{
								console.log('$once:onIdLogin')
								if(result)
								{
									setTimeout(()=>{
										resolve(true)
									},100)
								}else
								{
									reject('ERROR')
								}
							})
						})
						
					//#endif
				}catch(e){
					uni.showToast({
						icon:'error',
						title:'登录失败'
					})
				}
				
				uni.showToast({
					title:'登录成功',
					duration:500,
				})
				
				return true 
			},
			// onIdLogin(){
			// 	if(this.comfirmCallback)
			// 		this.comfirmCallback()
			// },
			async onComfirmBaseInfo() {
				console.log(this.userStore.baseInfo.head_icon_url)
				console.log(this.userStore.baseInfo.phone_number)
				console.log(this.userStore.baseInfo.nickname)
				console.log(this.userStore.baseInfo.name)
				
				if(this.$u.test.isEmpty(this.userStore.baseInfo.head_icon_url))
				{
					uni.showToast({
						icon:'error',
						title:'请选择头像'
					})
					
					return
				}else if(this.$u.test.isEmpty(this.userStore.baseInfo.nickname))
				{
					uni.showToast({
						icon:'error',
						title:'请输入昵称'
					})					
					return
				}else if(this.$u.test.isEmpty(this.userStore.baseInfo.name))
				{
					uni.showToast({
						icon:'error',
						title:'请输入姓名'
					})					
					return
				}else if(!this.$u.test.mobile(this.userStore.baseInfo.phone_number))
				{
					uni.showToast({
						icon:'error',
						title:'手机号码不正确'
					})					
					return
				}
				
				uni.showLoading({
					title:'上传头像'
				})
				
				let uploadData = await this.$netTool.handleUploadFile(
					this.absUrl('/api/common/storage/upload'),  //上传接口URL
					this.userStore.baseInfo.head_icon_url, // 要上传的文件路径
					'image', //文件类型
					'avatar', // 存储关键字,存储目录名称
					{
						"token":this.userStore.token //headers 加上令牌
					},
				);
				
				if(uploadData)
				{
					this.userStore.baseInfo.head_icon_url = uploadData.data.path
					console.log(this.userStore.baseInfo.head_icon_url)
				}else
				{
					uni.showToast({
						icon:'error',
						title:'头像上传失败'
					})	
				}
				
				uni.showLoading({
					title:'正在登录'
				})
						  
				let res = await this.$http.post('/user/job/user/baseinfo',this.userStore.baseInfo)
				
				uni.hideLoading()
				
				if(this.comfirmCallback)
				{
					this.showBaseInfoPopup=false
					this.onClose()
					this.comfirmCallback()
				}
			},
			onOpen(){
				this.$emit("open");
			},
			onClose(){
				// this.$emit("update:show",false)
				this.$emit("close");
				console.log("close")
			},
			async onChooseAvatar(){
				let that = this
				await new Promise((resolve,reject)=>{
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: async (res)=>{
							console.log(JSON.stringify(res.tempFilePaths));
					
							let filePath = res.tempFilePaths[0];
							
							that.userStore.baseInfo.head_icon_url = filePath
							
							resolve(true) 
						}
					});
				})
			}, 
		}
	}
</script>

<style>
</style>